<template>
  <el-row class="panel">
    <el-col :span="24" class="">
      <el-col :span="24" class="panel-top">
        <el-col :span="16" style="font-size:26px;line-height: 60px;">
          <img @click="cgmenu" src="../assets/logo.png" class="logo">
          <span style="font-size: 15px;font-weight: bold;display: block;color:#fff;">大数据平台  </span>
        </el-col>
        <el-col :span="8" class="rightbar">
          <el-dropdown v-show="showDBC" class="myDropdown">
            <span class="el-dropdown-link topBt">
              {{getDataCenter.data_center_name}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in getDataCenterList" @click.native="cgCenter(item)" :key="index">
                {{item.data_center_name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-show="showDBC" class="fx">|</span>
          <el-dropdown class="myDropdown" @command="handleCommand">
            <span class="el-dropdown-link topBt">
              {{getUser.user_name}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!--<el-dropdown-item>我的消息</el-dropdown-item>-->
              <el-dropdown-item command="set">账号设置</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>

      <el-col :span="24" class="panel-center">
        <!--<el-col :span="4">-->

        <!--菜单-->
        <div style="width:200px;">
          <!-- <el-menu style="border-top: 1px solid #475669;"
                   :default-active="menuActive"
                   class="el-menu-vertical-demo"
                   @open="handleopen"
                   @close="handleclose"
                   @select="handleSelect"
                   theme="dark"
                   unique-opened
                   :collapse="isCollapse"
                   router>
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden&&authMenu(item)">
              <el-submenu :index="index+''" v-if="!item.leaf" :key="index">
                <template slot="title">{{item.name}}</template>
                <el-menu-item v-for="(child,c) in item.children" :index="child.path"
                              v-if="child.hide!=true&&authMenu(child)" :key="c">
                  {{child.name}}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path" :key="index">
                {{item.children[0].name}}
              </el-menu-item>
            </template>
          </el-menu> -->

          <section
            id="mymenu"
           >
          <el-menu
            class="el-menu-vertical-demo"
            :default-active="menuActive"
            @open="handleopen"
            @close="handleclose"
            @select="handleSelect"
            theme="dark" 
            router
            unique-opened
           
            :collapse="isCollapse">

            <template v-for="(item,index) in $router.options.routes"
              v-if="!item.hidden&&authMenu(item)">

              <el-submenu 
                v-if="!item.leaf&&item.children.length>0"
                :index="`${index}`" 
                :key="index">
                <template slot="title">
                  <i :class="item.iconCls"></i>
                  <span slot="title">{{item.name}}</span>
                </template>

                  <el-menu-item 
                  v-for="(child,c) in item.children" 
                  :index="child.path"
                  v-if="!child.hide&&authMenu(child)" 
                  :key="c">
                    {{child.name}}
                  </el-menu-item>
              </el-submenu>

              <el-menu-item 
                v-if="item.leaf&&item.children.length>0" 
                :index="item.children[0].path" 
                :key="index">
                <i :class="item.iconCls"></i>
                <span slot="title">{{item.children[0].name}}</span>
              </el-menu-item>

            </template>
          </el-menu>
          </section>

        </div>
        
        

        <!--</el-col>-->
        <!--<el-col :span="20" class="panel-c-c">-->
        <section class="panel-c-c" :style="`animation:${isCollapse?'co':'op'} 0.37s; left: ${isCollapse?'64px':'200px'};`"> <!-- :style="`animation:${isCollapse?'co':'op'} 0.37s; left: ${isCollapse?'64px':'200px'};`" -->
          <div class="grid-content bg-purple-light">
            <el-col :span="24" style="margin-bottom:15px;">
              <!--<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>-->
              <div class="navsx"></div>
              <el-breadcrumb separator="/">
                <!--<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>-->
                <el-breadcrumb-item v-for="(path,index) in currentPaths" v-if="path.name!=''"
                                    @click="breadcrumbTo(path,index)" :key="index">
                  <span @click="breadcrumbTo(path,index)">{{path.name}}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
              <hr style="height:1px;border:none;border-top:1px solid #ccc;">
            </el-col>
            <el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
              <transition>
                <router-view ref="rtview"></router-view>
              </transition>
            </el-col>
          </div>
        </section>
        <!--</el-col>-->
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
  import util from '../common/util'
  import dao from '../common/dao'
  import { mapGetters } from 'vuex'
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {
        isCollapse:true,
        showDBC : true,
        menuActive: "/page11",
        activeIndex: '',
        menus: ["/user/menu/login"],
        visible: false,
        currentPaths: [],
        form: {
          dataMode: "1",
          cgpw: false,
          passWord: "",
          newPassWord: "",
        }
      }
    },
    computed: {
      ...mapGetters([
        'getUser',
        'getDataCenter',
        'getDataCenterList',
        'getRoles',
        'getTenants'
      ])
    },
    watch: {
      //监听路由改变
      '$route' (to, from) {
        //更新面包屑
       this.updateBreadcrumbByRT(to, from);
        // 更新数据显示与否
        this.updateShowBDC(to, from)

        //更新选中菜单按钮
        this.updateMenuActive(to, from)
      },
      menuActive (val, oldVal) {

      },
      /* isCollapse(n){
        
        if(!n){
          let h  = window.screen.height
          document.getElementsByClassName('el-menu-vertical-demo')[0].style.height = h.toString();
          document.getElementsByClassName('el-menu-vertical-demo')[0].style['overflow-y']='scroll';
        }

      } */
    },
    methods: {
      ...mapActions([
        'setUser', // 映射 this.setuser() 为 this.$store.dispatch('setuser')
        'setDataCenter',
        'setDataCenterList',
        'setRoles',
        'setTenants',
      ]),
      cgmenu(){
        this.isCollapse = !this.isCollapse
      },
      updateMenuActive(to, from){
        if(to.path=='/page11') this.menuActive = to.path;
        //(this.menuActive != this.$route.path) ? this.menuActive = this.$route.path : void 0;
      },
     updateBreadcrumbByRT(to, from){
       let updateArr = ['/page61', '/page62', '/page63', '/page21', '/page22','/page41','/page31','/page91','/page92'
       ,'/page93','/page94','/page95','/page96','/page97','/page101','/page102','/page103','/page104','/page105','/page106','/Pagea1','/Pagea2','/Pagea3'];
       if (updateArr.indexOf(to.path) != -1) this.currentPaths = [];
       if(from.path=="/page11"&&to.path=="/page42"){
         //避免首页跳到 page42时清掉 面包屑
       }
       else if(from.path=="/page71"&&to.path.indexOf("/page311")>-1){
         //避免数据稽核跳到 详情页面page311 时清掉 面包屑
       }
       //比如page71 -> 7
       else if (to.path.split("")[5] != from.path.split("")[5]) this.currentPaths = [];
       if (this.currentPaths.length > 0) {
         for (let i in this.currentPaths){
           let item = this.currentPaths[i];
           if (item.path == to.path && JSON.stringify(item.params) == JSON.stringify(to.params)) {
             let index = parseInt(i) + 1;
             this.currentPaths.splice(index, (this.currentPaths.length - index));
             return;
             break;
           }
         }
       }
       let obj = {
         name: to.name,
         path: to.path,
         params: to.params,
         query: to.query,
       };
       obj.strPath = JSON.stringify({path: obj.path.replace('/', ''), params: obj.params, query: obj.query});
       this.currentPaths.push(obj)
     },
      updateShowBDC () {
        let arr =['81','21','211','212','22','41','42'];
        let path = this.$route.path;
        this.showDBC = (arr.indexOf(path.replace(/\/page/,''))== -1)
      },
      currentPathsInit(){
        let name = this.$route.name;
        let path = this.$route.path;
        let params = this.$route.params;
        let query = this.$route.query;
        let obj = {name, path, params, query};
        obj.strPath = JSON.stringify(obj);
        this.currentPaths = [obj]
        this.menuActive = path;
      },
      cgCenter (center) {
        this.setDataCenter(center).then(res => {
          this.updateSysDataByCenter();
          //this.$router.go(0)
        });
      },
      updateSysDataByCenter(){
        let path = this.$route.path;
        if (path == '/page11') {
          this.$refs.rtview.testHttp()
        } else {
          //this.menuActive = "/page11";
          this.$router.push('/page11');
        }
      },
      menuDic () {
        return true
      },
      breadcrumbTo(path, index){
        this.$router.push({path: path.path, params: path.params, query: path.query})
      },
      topage (p) {
        this.$router.push(`/${p}`);
      },
      handleCommand (command) {
        if (command == "set") this.topage("page13")
      },
      onSubmit() {
        console.log('submit!');
      },
      handleopen () {
        
       },
      handleclose () { },
      handleSelect () {
        //(this.menuActive != this.$route.path) ? this.menuActive = this.$route.path : void 0;
      },
      //退出登录
      logout () {
        let _this = this;
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          dao.logout({}).then(res=>{
            util.restoreSystem()
            _this.setUser({});
            _this.$router.replace('/login');
          })

        }).catch(() => {

        });
      },
      getMenu(){
        dao.getMenu({}).then(res => {
          if (res.body.retCode != '200') return;
          let arr = [];
          let results = res.body.results;
          results.map(itme => {
            itme.resource_type == 1 ? arr.push(itme.resource_path) : ''
          });
          this.menus = arr;
        }).catch(res => {
          //this.$router.replace('/login');
        })
      },
      getCenterList () {

        dao.getDataCenterList({}).then(res => {
          if (res.body.retCode != "200") {
            this.$notify.error({
              title: '错误',
              message: '获取数据中心信息有误'
            });
            //this.$message('获取数据中心信息有误');
            return
          }
          //this.$message('获取数据中心信息成功');
          this.setDataCenter(res.body.datacenter_info_list[0]).then(res => {
            this.getUserInfo();
          });
          this.setDataCenterList(res.body.datacenter_info_list)
        }).catch(res => { })

      },
      getUserInfo(){
        dao.getUserInfo({}).then(res => {
          if (res.body.retCode != '200') return;
          if (res.body.roles) this.setRoles(res.body.roles);
          if (res.body.tenants) this.setTenants(res.body.tenants);
        }).catch(res => {
          //this.$router.replace('/login');
        })
      },
      authMenu(item){
        if (!item.resource_path)return false;
        if (this.menus.indexOf(item.resource_path) > -1)return true;
        else return false
      },
      pageInit(){
        if (!this.getUser.user_id) {
          let user_id = util.fetch('user_id');
          let user_name = util.fetch('user_name');
          this.setUser({user_name, user_id});
        }
        this.getMenu();
        this.getCenterList();
        this.currentPathsInit()
      },
    },
    mounted () {
      this.pageInit();
      // this.$nextTick(function () {
      //   // DOM 现在更新了
      //   // `this` 绑定到当前实例
      //   let h  = window.screen.height
      //   document.getElementById('mymenu').style.height=h.toString();
      // })
    }
  }
</script>

<style scoped>

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }

  .panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
  }

  .panel-top {
    height: 60px;
    line-height: 60px;
    background: #1f2d3d;
    color: #ffffff;
  }

  .panel-top .rightbar {
    text-align: right;
    padding-right: 35px;
  }

  .panel-top .rightbar .el-menu {
    background-color: inherit;

  }

  .panel-top .rightbar .el-submenu__title {
    color: #c0ccda !important;
  }

  .panel-top .rightbar .el-submenu__title:hover {
    background-color: #0099cc !important;
  }

  .panel-top .rightbar .head {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 10px 0px 10px 10px;
    float: right;
  }

  .panel-center {
    background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
  }

  .panel-c-c {
    background: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 200px;
    overflow-y: scroll;
    padding: 20px;
  }

  .logout {
    background: url(../assets/logout_36.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    float: left;
  }
  
  .logo {
    width: 66px;
    float: left;
    margin: 14px;
  }

  .topBt {
    color: #fff;
    cursor: pointer;
  }

  .topBt i {
    font-size: 8px;
  }

  .myDropdown {
    padding: 1px;
  }

  .fx {
    margin: 4px;
    text-align: center;
    color: #fff;
  }

  .tip-logout {
    float: right;
    margin-right: 20px;
    padding-top: 5px;
  }

  .tip-logout i {
    cursor: pointer;
  }

  .admin {
    color: #c0ccda;
    text-align: center;
  }

  .navsx {
    width: 2px;
    background: #0099cc;
    height: 12px;
    float: left;
    margin: auto 5px;
  }

  .navsx:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  .clear:before {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }
  #mymenu{
    position: absolute;
    /* right: 0px; */
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow-y: scroll;
    width: 216px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    /* height: 626px;
    overflow-y: scroll; */
  }

  @keyframes co{
    from {left: 200px;}
    to {left: 64px}
  }

  @keyframes op{
    from {left: 64px;}
    to {left: 200px}
  }

 

</style>